响应式 Web 设计原则

发表于
本文字数： 1k | 阅读时长 ≈ 2 分钟

媒体查询

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小显示不同的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。

媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中用上你想用的选择器和样式。

下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：

1
@media (max-width: 100px) { /* CSS Rules */ }

图片自适应

用 CSS 来让图片自适应其实很简单。不要使用绝对单位：

1
img { width: 720px; }

你应该使用：

1
2
3
4
5
img {
  max-width: 100%;
  display: block;
  height: auto;
}

max-width 属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。将 display 属性设置为 block 可以让 <image> 标签从内联元素（默认值）更改为块级元素。设置 height 属性为 auto保持图片的原始宽高比。

针对高分辨率屏幕应使用视网膜图片

为优化图片在高分辨率设备下的显示效果，最简单的方式是定义它们的 width 和 height 值为源文件宽高的一半。

这是一个图片宽高设置为源文件一半的例子：

1
2
3
4
<style>
  img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="一张高质量的图片">

使排版根据设备尺寸自如响应

除了用 em 或 px 去设置文本大小, 你还可以用视窗单位来做响应式排版。视窗单位还有百分比，它们都是相对单位，但却基于不同的参照物。视窗单位相对于设备的视窗尺寸 (宽度或高度) ，百分比是相对于父级元素的大小。

四个不同的视窗单位分别是：

  • vw：如 10vw 的意思是视窗宽度的 10%。
  • vh： 如 3vh 的意思是视窗高度的 3%。
  • vmin： 如 70vmin 的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。
  • vmax： 如 100vmax 的意思是视窗中较大尺寸的 100% (高度 VS 宽度)。